<style>
    .main{display: inline-block;}
    
    .fr{
        float: right;
        padding-right: 10px;
    }
    .template{
        width: 300px;
        font-size: 12px;
        border: 1px solid silver;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        padding: 2px;
        margin: 2px;
        background-color: mintcream;
        display: inline-block;
        vertical-align: top;
    }
    .headTemplate{
        background-color: orange;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        padding-left: 10px;
        padding-top: 1px;
        height: 16px;
        font-weight: normal;
        font-size: 12px;

    }
    .selectorForm{
        padding: 4px;
        margin: 10px;
    }
    .bigSelect{
        height: 22px;
    }
    .errors{
        background-color: coral;
        padding: 5px;
    }
    .bodyTemplate{
        padding: 5px;
        min-height: 60px;
        overflow: hidden;
    }
    .headColors-html{background-color: #E3CEAB;}
    .headColors-x-php5{background-color: #9db7c3;}
    .headColors-x-css{background-color: orange;}
    .headColors-javascript{background-color: darkseagreen;}
    .leftBar{
            display: inline-block;
    }

    .rightBar{
        -moz-border-radius:5px;-webkit-border-radius:5px;
        vertical-align: top;
        display: inline-block;
        width: 300px;
        border: 2px solid gray;
        margin: 5px;
        padding: 5px;
    }
</style>

<div class="main">


    <div class="selectorForm">
        Внимание: модуль работает только для *nix систем
        <form method="POST">
            Выберите имя пользователя
            <select class="bigSelect" name="usersNamesSelector">
                <option value="ai">ai</option>
                <option value="barthez">barthez</option>

            </select>

            <select class="bigSelect" name="nbVersionSelector">
                <? foreach ($this->versionsNetBeans as $key => $version): ?>
                    <option value="<?= $version ?>" <? if ($_POST["nbVersionSelector"] == $version): ?> selected="selected"<? endif; ?>>
                        <?= $version ?>
                    </option>
                <? endforeach; ?>
            </select>

            <input type="submit" name="buttonSubmit">
        </form>
    </div>
    <div class="leftBar">

        <? if (count($this->errorMessages)): ?>
            <div class="errors">
                Проблема:
                <? foreach ($this->errorMessages as $message): ?>
                    <?= $message ?>
                <? endforeach; ?>
            </div>
        <? endif; ?>
        <? if (isset($_POST['buttonSubmit'])): ?>
            <? foreach ($this->allTemplates as $category => $templates): ?>
                <div class="">

                    <br/>
                    <?= $category ?><br/>
                    <? $counter = 0 ?>         
                    <? if ($templates): ?>

                        <? foreach ($templates as $key => $value): ?>


                            <? $counter++ ?>
                            <div class="template">
                                <div number="<?= $category . $key ?>" class="headTemplate headColors-<?= $category ?>">
                                    <span class="fr"><?= $category ?></span>
                                    <?= $value->getAbbreviation() ?>
                                </div>
                                <div id="<?= $category . $key ?>" class="bodyTemplate">
                                    <?= $value->getTemplate() ?>
                                </div>
                            </div>
                            <? if ($counter % 2 == 0): ?>
                                <br />
                            <? endif; ?>            
                        <? endforeach; ?>

                    <? else: ?>
                        <div class="errors">
                            Проблема: у этого паользователя нет NetBeans или CodeTemplates
                        </div>
                    <? endif; ?>
                </div>
            <? endforeach; ?>

        <? endif; ?>
    </div>
    
    <div class="rightBar">
        <form action="netbeans-codetemplates">
            <input name="name" value="templateName"/>
            <input type="submit" value="Экспорт"/>
            
            
<!--            <textarea style="width: 90%;"></textarea>-->
        
        
        
        </form>
    </div>
</div>







<script>
    
    $(document).ready(function(){
        $('.bodyTemplate').each(function(){
            $(this).click(function(){
                $(this).toggleClass('hide');
            });
        });
        
        $('.headTemplate').each(function(){
            
            $(this).click(function(){
                id = $(this).attr('number');
                console.log(id);
                $('#' + id).toggleClass('hide');
            });
        });
    });
    
</script>

